<lv-group lvDirection="vertical" lvGutter="20px">
  <section>
    <div class="lv-common-text">Custom check</div>
    <lv-form-control lvErrorTip="mobile number is incorrect">
      <input lv-input type="text" [formControl]="syncCtrl" />
    </lv-form-control>
  </section>

  <section>
    <div class="lv-common-text">Asynchronous check</div>
    <lv-form-control lvErrorTip="asynchronous check error">
      <input lv-input type="text" [formControl]="asyncCtrl" />
    </lv-form-control>
  </section>

  <section>
    <div class="lv-common-text">Error message for object</div>
    <lv-form-control [lvErrorTip]="userErrorTip">
      <input lv-input type="text" [formControl]="name" />
    </lv-form-control>
  </section>

  <section>
    <div class="lv-common-text">Error message for string</div>
    <lv-form-control lvErrorTip="Password format is incorrect">
      <input lv-input type="password" [formControl]="password" />
    </lv-form-control>
  </section>

  <section>
    <div class="lv-common-text">Error message for temlate</div>
    <lv-form-control [lvErrorTip]="customerError">
      <input lv-input type="text" [formControl]="email" style="display: inline-block;" />
      <ng-template #customerError let-control>
        <span *ngIf="control.hasError('required')" class="lv-form-control-error" style="margin-left: 5px;">
          Email cannot be empty.
        </span>
      </ng-template>
    </lv-form-control>
  </section>

  <section>
    <div class="lv-common-text">Custom error message(tips)</div>
    <lv-form-control #lvFormControl>
      <input
        lv-input
        type="text"
        [formControl]="phone"
        [lv-tooltip]="errorTips.phone"
        lvTooltipIcon="lv-icon-status-failed"
        lvTooltipTrigger="customize"
        [(lvTooltipVisible)]="visible.phone"
        lvTooltipPosition="right"
        (focus)="focus()"
        (blur)="visible.phone = false"
      />
    </lv-form-control>
  </section>
</lv-group>
